<template>
  <div>
    <div v-for='(item, index) in clothesMap' :key='index' style='margin-top: 22px'>
      <a-row>
        <a-col :span='8'>
          <a-space algin='center' :size='30'>
            <h3 style='font-weight: bold'>{{ item.name }}</h3>
            <h4 style='color: #999'>2件以上请选中之后，再输入数量</h4>
          </a-space>
        </a-col>
      </a-row>
      <a-row :gutter='[24, 24]'>
        <a-col
          v-for='clothes in item.list'
          :key='clothes.id'
          :xxl='3'
          :xl='4'
          :lg='6'
          :md='8'
          :sm='12'
          :xs='24'>
          <a-card hoverable>
            <a-checkbox :checked='clothes.checked' @change='onCheckChange($event, clothes)'></a-checkbox>
            <div class='clothes-name'>{{ clothes.name }}</div>
            <div class='clothes-img'>
              <a-avatar :src='clothes.img_url' class='clothes-img-head' icon='skin' shape='square' />
            </div>
            <div class='clothes-price'>
              <span>{{ clothes.price }}</span>
              <div class='clothes-vip'>
                <img src='@/assets/vip_price.png' alt=''>
                <span>{{ clothes.vip_price }}</span>
              </div>
            </div>
            <div class='clothes-info'>
              <!-- <a-input-number
                v-model="clothes.num"
                :min="1"
                :formatter="(value) => `${value}件`"
                :parser="(value) => value.replace('件', '')"
              /> -->
              <a-input v-model='clothes.num' type='number' @change='clothesNumChange($event,clothes)'></a-input>
              件
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { clothesOfflineList } from '@/api/clothes'

export default {
  data() {
    return {
      clothesMap: []
    }
  },
  created() {
    this.clothesOfflineList()
  },
  computed: {
    clothesIdList() {
      const clothesIdList = []
      this.clothesMap.forEach(kinds => {
        const checkedClothes = kinds.list
          .filter(clothes => clothes.checked)
          .map(clothes => {
            return {
              id: clothes.id,
              num: clothes.num
            }
          })
        clothesIdList.push(...checkedClothes)
      })
      return clothesIdList
    }
  },
  methods: {
    clothesNumChange(e, clothes) {
      if (clothes.num > 0) {
        clothes.checked = true
      } else {
        clothes.checked = false
        clothes.num = 0
      }
    },
    onCheckChange(e, clothes) {
      clothes.checked = e.target.checked
      if(clothes.num <= 0){
        clothes.num = 1
      }
    },
    clothesOfflineList() {
      clothesOfflineList().then(res => {
        let data = res.data
        data = data.filter(kinds => {
          kinds.list.forEach(clothes => {
            clothes.num = 0
            clothes.checked = false
          })
          return kinds.list && kinds.list.length
        })
        this.clothesMap = data
      })
    }
  }
}
</script>

<style lang='less' scoped>
.clothes-img {
  margin-top: 10px;
  width: 100%;
  padding-top: 100%;
  position: relative;

  .clothes-img-head {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.clothes-price {
  font-size: 15px;
  margin-top: 10px;
  display: flex;
  align-items: center;

  .clothes-vip {
    display: flex;
    position: relative;
    margin-left: auto;

    > img {
      width: 80px;
    }

    > span {
      position: absolute;
      right: 8px;
      color: #944101;
      top: 3px;
      font-size: 14px;
      font-weight: bold;

      &:before {
        content: "￥";
        font-size: 12px;
      }
    }
  }

  &::before {
    content: '￥';
    font-size: 14px;
  }
}

.clothes-name {
  font-size: 15px;
  margin-top: 14px;
}

.clothes-info {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  align-items: center;
  font-size: 17px;
}

/deep/ .ant-card-body {
  padding: 12px 18px;
}

.ant-input-number,
.ant-input {
  flex: 1;
  margin-right: 8px;
}
</style>
